﻿@model RestaurantClassLibrary.Reservation

@{
    ViewBag.Title = "Make a Reservation";
}

<h2>Make a Reservation</h2><br />
<h3 style="color:red">@ViewBag.Message</h3><br /><br />

@using (Html.BeginForm("DoCreate", "Reservation")) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Reservation</legend>

        <div class="editor-label">
            <strong>When would you like to visit us?</strong>
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Date)
            @Html.ValidationMessageFor(model => model.Date)
        </div>

        <div class="editor-label">
            <strong>How many people is the booking for?</strong> 
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Seats)
            @Html.ValidationMessageFor(model => model.Seats)
        </div>

        <div class="editor-label">
            <strong>Please provide a contact name</strong>
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            <strong>Please provide a contact phone number</strong>
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PhoneNumber)
            @Html.ValidationMessageFor(model => model.PhoneNumber)
        </div>

        <p>
            <input type="submit" value="Make Reservation" />
        </p>
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    @*datepicker script, ammended from http://www.itorian.com/2012/10/jquery-ui-datepicker-in-mvc-4-issue.html*@
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/themes/base/css")

    <script type="text/javascript">
        $(document).ready(function () {
            $("#Date").datepicker({
                minDate: 0,
                changeMonth: true,
                changeYear: true,
                dateFormat: ("mm-dd-yy")
            });
        });
    </script>
}
